/* ==========================================================================
   DMC Mystic — CSS nettoyée sans changement de structure
   ========================================================================== */

:root {
    --dmc-bg: #050505;
    --dmc-panel: rgba(0, 0, 0, 0.86);
    --dmc-panel-soft: rgba(35, 35, 35, 0.67);
    --dmc-border: #222;
    --dmc-text: #ffffff;
    --dmc-cyan: #ace7ee;
    --dmc-green: #17edbd;
    --dmc-red: #d00000;
    --dmc-radius: 12px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--dmc-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 10px;
    color: var(--dmc-text);
    background-color: var(--dmc-bg);
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
} 

.ariane-bas {
    width: 100%;
    max-width: 440px;
    margin: 30px auto 0;
    padding: 14px;
    box-sizing: border-box;

    background: #111;
    border: 1px solid #303030;
    border-radius: 12px;

    font-family: Arial, Helvetica, sans-serif;
    color: #eee;
}

.ariane-groupe {
    margin-bottom: 18px;
}

.ariane-groupe:last-child {
    margin-bottom: 0;
}

.ariane-groupe h2 {
    margin: 0 0 9px;
    padding: 0 2px 8px;

    color: #f1f1f1;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;

    border-bottom: 1px solid #343434;
}

.ariane-groupe ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.ariane-groupe li {
    margin: 0;
    padding: 0;
}

.ariane-groupe a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    min-height: 42px;
    padding: 9px 12px;
    box-sizing: border-box;

    color: #d8d8d8;
    background: #1b1b1b;
    border: 1px solid #333;
    border-radius: 7px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.ariane-groupe a::before {
    content: "›";
    flex: 0 0 auto;

    color: #8f8f8f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.ariane-groupe a:hover {
    color: #fff;
    background: #242424;
    border-color: #555;
    transform: translateX(2px);
}

.ariane-groupe a:focus-visible {
    color: #fff;
    background: #242424;
    border-color: #aaa;
    outline: 2px solid #aaa;
    outline-offset: 2px;
}

.ariane-groupe a:active {
    transform: translateX(1px);
}

.lien-externe {
    margin-left: auto;
    color: #999;
    font-size: 13px;
    line-height: 1;
}

.ariane-groupe-youtube a {
    border-color: #493030;
}

.ariane-groupe-youtube a:hover {
    background: #281b1b;
    border-color: #754545;
}

@media (max-width: 480px) {
    .ariane-bas {
        width: calc(100% - 20px);
        margin-top: 20px;
        padding: 11px;
        border-radius: 9px;
    }

    .ariane-groupe a {
        min-height: 44px;
        padding: 10px;
        font-size: 13px;
    }
}




img {
    display: block;
    max-width: 100%;
}

.container {
    width: min(100%, 440px);
    margin: 0 auto;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.69);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

 /* -------------------------------------------------------
   menu warper
------------------------------------------------------- */

.menu-wrapper {
    width: 100%;
    background: #0d0d0d;      /* fond sombre */
    border-bottom: 1px solid #222; /* ligne discrète */
    padding: 4px 0;           /* léger espace autour */
}

/* Wrapper du menu */
.menu-wrapper {
    width: 100%;
    background: #0d0d0d;
    border-bottom: 1px solid #222;
    padding: 4px 0;
}

/* NAV */
nav {
    width: 100%;
}

/* UL centré */
nav ul {
    display: flex;
    justify-content: center; /* CENTRAGE */
    flex-wrap: wrap;         /* RESPONSIVE SMARTPHONE */
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 6px 4px;
}

/* Liens façon onglets sombres */
nav ul li a {
    display: block;
    padding: 4px 5px;
    font-size: 12px;
    color: #ccc;
    text-decoration: none;
    background: #3a3939;
    border-radius: 4px;
    border: 1px solid #1a1a1a;
    transition: 0.25s ease;
}

/* Hover */
nav ul li a:hover {
    background: #222;
    border-color: #333;
    color: #fff;
}

/* Onglet actif */
nav ul li a.active {
    background: #333;
    color: #fff;
    border: 1px solid #555;
}

/* Smartphone : texte légèrement plus grand */
@media (max-width: 480px) {
    nav ul li a {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Cartes
   ========================================================================== */

.mystic-card,
.cosmic-audio-widget {
    width: min(100%, 430px);
    border: 1px solid var(--dmc-border);
    border-radius: var(--dmc-radius);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.17);
}

.mystic-card {
    padding: 12px;
    color: var(--dmc-cyan);
    background: radial-gradient(circle at center, var(--dmc-panel-soft), rgba(10, 10, 10, 0.13));
}

.album-card {
    min-height: 180px;
    display: flex;
    flex-direction: row;
    gap: 12px; 
    overflow: hidden;margin-top: 10px;
}

.album-card .album-thumb {
    width: 50%;
    min-width: 0;
    overflow: hidden;
    background: #111;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.album-card .album-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.album-card .album-thumb img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.25s ease;
}

.album-card .album-thumb img:hover {
    opacity: 0.84;
}

.album-card .album-info {
    width: 50%;
    min-width: 0;
}

.album-info h3 {
    margin: 0 0 7px;
    color: var(--dmc-cyan);
    font-size: 17px;
    line-height: 1.2;
}

#album-description {
    color: #ddd;
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

/* Lecteur
   ========================================================================== */

.cosmic-audio-widget {
    min-height: 245px;
    padding: 10px 14px 12px;
    color: #e0e0ff;
    background: radial-gradient(circle at center, #000, #020202);
}

/* Afficheur LCD
   ========================================================================== */

:root {
    --lcd-main: #ace7ee;
    --lcd-bright: #c8fbff;
    --lcd-soft: #8db8be;
    --lcd-deep: #00101c;
    --lcd-mid: #002a40;
    --lcd-glow: rgba(172, 231, 238, .45);
    --lcd-led: #ace7ee;
    --lcd-peak: #d00000;
    --lcd-idle: #222;
}

:root[data-lcd-theme="green"] {
    --lcd-main: #69f5bd;
    --lcd-bright: #baffdc;
    --lcd-soft: #79bfa0;
    --lcd-deep: #00170e;
    --lcd-mid: #063d28;
    --lcd-glow: rgba(23, 237, 189, .42);
    --lcd-led: #23efad;
    --lcd-peak: #d8ff69;
}

:root[data-lcd-theme="amber"] {
    --lcd-main: #f2c65c;
    --lcd-bright: #ffe6a0;
    --lcd-soft: #bea66a;
    --lcd-deep: #1b1000;
    --lcd-mid: #4a3105;
    --lcd-glow: rgba(242, 198, 92, .42);
    --lcd-led: #f2c65c;
    --lcd-peak: #ff714d;
}

:root[data-lcd-theme="violet"] {
    --lcd-main: #c5a5ff;
    --lcd-bright: #eadcff;
    --lcd-soft: #a58abd;
    --lcd-deep: #10051d;
    --lcd-mid: #35204d;
    --lcd-glow: rgba(182, 129, 255, .43);
    --lcd-led: #b681ff;
    --lcd-peak: #ef88ff;
}

:root[data-lcd-theme="red"] {
    --lcd-main: #ff8b8b;
    --lcd-bright: #ffd0d0;
    --lcd-soft: #bd7b7b;
    --lcd-deep: #1d0505;
    --lcd-mid: #4c1515;
    --lcd-glow: rgba(255, 92, 92, .40);
    --lcd-led: #ff6868;
    --lcd-peak: #ffd166;
}

:root[data-lcd-theme="ice"] {
    --lcd-main: #a9d7ff;
    --lcd-bright: #edf8ff;
    --lcd-soft: #8aa9bf;
    --lcd-deep: #061321;
    --lcd-mid: #17364f;
    --lcd-glow: rgba(126, 202, 255, .42);
    --lcd-led: #80cfff;
    --lcd-peak: #ffffff;
}

:root[data-lcd-theme="blue"] {
    --lcd-main: #63a8ff; --lcd-bright: #cbe1ff; --lcd-soft: #7595bd;
    --lcd-deep: #020d20; --lcd-mid: #12315c; --lcd-glow: rgba(58, 137, 255, .43);
    --lcd-led: #4895ff; --lcd-peak: #9ff7ff;
}

:root[data-lcd-theme="pink"] {
    --lcd-main: #ff91c8; --lcd-bright: #ffd7eb; --lcd-soft: #bd80a0;
    --lcd-deep: #200613; --lcd-mid: #541b38; --lcd-glow: rgba(255, 105, 180, .42);
    --lcd-led: #ff69b4; --lcd-peak: #ffe06b;
}

:root[data-lcd-theme="lime"] {
    --lcd-main: #baf05b; --lcd-bright: #e8ffb8; --lcd-soft: #9caf72;
    --lcd-deep: #0c1502; --lcd-mid: #30470d; --lcd-glow: rgba(172, 240, 75, .40);
    --lcd-led: #9eea3d; --lcd-peak: #fff36a;
}

:root[data-lcd-theme="orange"] {
    --lcd-main: #ff9d4d; --lcd-bright: #ffd3aa; --lcd-soft: #bd8960;
    --lcd-deep: #1c0b00; --lcd-mid: #52250a; --lcd-glow: rgba(255, 132, 45, .42);
    --lcd-led: #ff812d; --lcd-peak: #ffe15f;
}

:root[data-lcd-theme="white"] {
    --lcd-main: #e7e7e7; --lcd-bright: #ffffff; --lcd-soft: #a9a9a9;
    --lcd-deep: #101010; --lcd-mid: #343434; --lcd-glow: rgba(255, 255, 255, .32);
    --lcd-led: #eaeaea; --lcd-peak: #ffffff;
}

:root[data-lcd-theme="teal"] {
    --lcd-main: #5ce0d2; --lcd-bright: #c9fff9; --lcd-soft: #72aaa4;
    --lcd-deep: #001615; --lcd-mid: #0b4541; --lcd-glow: rgba(66, 220, 205, .42);
    --lcd-led: #43d8c9; --lcd-peak: #c5ff72;
}

:root[data-lcd-theme="gold"] {
    --lcd-main: #e8bd49; --lcd-bright: #ffe9a3; --lcd-soft: #aa9560;
    --lcd-deep: #171000; --lcd-mid: #493605; --lcd-glow: rgba(232, 189, 73, .43);
    --lcd-led: #e8bd49; --lcd-peak: #fff4a8;
}

:root[data-lcd-theme="magenta"] {
    --lcd-main: #f06cff; --lcd-bright: #facfff; --lcd-soft: #ac79b3;
    --lcd-deep: #18001c; --lcd-mid: #471052; --lcd-glow: rgba(229, 72, 255, .43);
    --lcd-led: #e248ff; --lcd-peak: #79f9ff;
}

:root[data-lcd-theme="indigo"] {
    --lcd-main: #8d8cff; --lcd-bright: #d9d8ff; --lcd-soft: #8382ad;
    --lcd-deep: #080820; --lcd-mid: #25255a; --lcd-glow: rgba(108, 106, 255, .43);
    --lcd-led: #7775ff; --lcd-peak: #d5a5ff;
}

:root[data-lcd-theme="copper"] {
    --lcd-main: #d78b5b; --lcd-bright: #ffd0af; --lcd-soft: #a17a63;
    --lcd-deep: #160904; --lcd-mid: #442315; --lcd-glow: rgba(215, 139, 91, .40);
    --lcd-led: #cc7443; --lcd-peak: #ffd16d;
}

:root[data-lcd-theme="aqua"] {
    --lcd-main: #58f4ef; --lcd-bright: #cafffd; --lcd-soft: #72b9b6;
    --lcd-deep: #001919; --lcd-mid: #07504f; --lcd-glow: rgba(72, 244, 239, .42);
    --lcd-led: #42e7e2; --lcd-peak: #ffffff;
}

:root[data-lcd-theme="mono"] {
    --lcd-main: #bfc5c7; --lcd-bright: #eef1f2; --lcd-soft: #858d90;
    --lcd-deep: #0a0c0d; --lcd-mid: #24292b; --lcd-glow: rgba(190, 200, 204, .28);
    --lcd-led: #aeb7ba; --lcd-peak: #ffffff;
}

.lcd-display {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 122px;
    min-height: 122px;
    display: grid;
    grid-template-rows: 16px 30px 16px 15px 15px;
    align-content: start;
    margin-bottom: 6px;
    padding: 7px 9px 8px;
    color: var(--lcd-main);
    background:
        linear-gradient(
            180deg,
            var(--lcd-mid),
            var(--lcd-deep)
        );
    border: 1px solid color-mix(in srgb, var(--lcd-main) 34%, transparent);
    border-radius: 7px;
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.88),
        0 0 8px color-mix(in srgb, var(--lcd-main) 15%, transparent);
    font-family: Consolas, "Courier New", monospace;
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
}

/* Glace de protection : reflet supérieur, légère courbure et profondeur. */
.lcd-display::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, .16) 0%,
            rgba(255, 255, 255, .055) 18%,
            transparent 34%,
            transparent 70%,
            rgba(255, 255, 255, .035) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .20),
        inset 0 -1px 0 rgba(0, 0, 0, .72);
}

.lcd-display::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 3;
    border-radius: 5px;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, .018) 0,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px,
            transparent 3px
        );
    opacity: .55;
}

.lcd-display > * {
    position: relative;
    z-index: 2;
}

/* Veille : rétroéclairage coupé, album et horloge encore lisibles. */
.lcd-display.is-off {
    color: #566064;
    background: linear-gradient(180deg, #101416, #070909);
    border-color: #252b2d;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, .96),
        0 1px 2px rgba(255, 255, 255, .025);
}

.lcd-display.is-off .lcd-topline {
    margin-bottom: 0;
    color: #566064;
}

.lcd-display.is-off .lcd-live-status,
.lcd-display.is-off .lcd-volume-meter,
.lcd-display.is-off #lcd-album,
.lcd-display.is-off #lcd-meta,
.lcd-display.is-off .seek-bar {
    visibility: hidden;
}

.lcd-display.is-off #track-title {
    grid-row: 2 / 5;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 8px 30px;
    color: #687378;
    font-size: 13px;
    line-height: 1.35;
    text-shadow: none;
    white-space: normal;
}

.lcd-display.is-off .lcd-subline {
    position: static;
}

.lcd-display.is-off #lcd-time {
    position: absolute;
    top: 7px;
    right: 9px;
    visibility: visible;
    color: #566064;
}

.lcd-display:not(.is-off) {
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, .82),
        0 0 10px var(--lcd-glow);
}

.lcd-topline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
    color: var(--lcd-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.lcd-live-status,
.lcd-volume-meter,
.lcd-subline {
    min-width: 0;
    display: flex;
    align-items: center;
}

.lcd-live-status {
    gap: 7px;
    white-space: nowrap;
}

#lcd-playback-state {
    min-width: 34px;
    color: var(--lcd-bright);
}

.lcd-key-hint {
    color: var(--lcd-soft);
    font-size: 8px;
    letter-spacing: .35px;
}

#lcd-activity-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--lcd-led);
    box-shadow: 0 0 7px var(--lcd-glow);
    opacity: .1;
}

.lcd-display.is-playing #lcd-activity-dot {
    animation: lcdActivityPulse .78s ease-in-out infinite;
}

.lcd-display.is-paused #lcd-activity-dot {
    animation: none;
    opacity: .1;
}

@keyframes lcdActivityPulse {
    0%, 100% { opacity: .28; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1); }
}

.lcd-volume-meter {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

#lcd-volume-input {
    width: clamp(38px, 8vw, 74px);
    height: 5px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px;
    background:
        linear-gradient(
            90deg,
            var(--lcd-main) 0%,
            var(--lcd-led) var(--volume-percent, 80%),
            color-mix(in srgb, var(--lcd-main) 18%, transparent) var(--volume-percent, 80%),
            color-mix(in srgb, var(--lcd-main) 18%, transparent) 100%
        );
    cursor: pointer;
}

#lcd-volume-input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 4px;
    background: transparent;
}

#lcd-volume-input::-webkit-slider-thumb {
    width: 9px;
    height: 9px;
    margin-top: -2px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--lcd-soft);
    border-radius: 50%;
    background: var(--lcd-bright);
    box-shadow: 0 0 5px var(--lcd-glow);
}

#lcd-volume-input::-moz-range-track {
    height: 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

#lcd-volume-input::-moz-range-progress {
    height: 5px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lcd-main), var(--lcd-led));
}

#lcd-volume-input::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border: 1px solid var(--lcd-soft);
    border-radius: 50%;
    background: var(--lcd-bright);
    box-shadow: 0 0 5px var(--lcd-glow);
}

#lcd-volume-value {
    min-width: 28px;
    text-align: right;
}

#track-title {
    position: relative;
    min-height: 28px;
    padding: 3px 2px;
    overflow: hidden;
    color: var(--lcd-bright);
    font-size: 12px;
    font-weight: 900;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 6px var(--lcd-glow);
}

#track-text {
    position: relative;
    z-index: 1;
}

.lcd-subline {
    justify-content: space-between;
    gap: 8px;
    color: var(--lcd-main);
    font-size: 9px;
    line-height: 15px;
}

#lcd-time {
    flex: 0 0 auto;
    color: var(--lcd-soft);
    white-space: nowrap;
}

#lcd-album,
#lcd-meta {
    min-height: 15px;
    overflow: hidden;
    color: var(--lcd-main);
    font-size: 9px;
    line-height: 15px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#lcd-album {
    flex: 1 1 auto;
}

#lcd-meta {
    color: var(--lcd-soft);
}

.seek-bar {
    width: 100%;
    height: 13px;
    margin: 3px 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.seek-bar::-webkit-slider-runnable-track {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--lcd-main),
            var(--lcd-led)
        );
    border-radius: 4px;
}

.seek-bar::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -3.5px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--lcd-bright);
    border: 1px solid var(--lcd-soft);
    border-radius: 50%;
}

.seek-bar::-moz-range-track {
    height: 4px;
    background: #406a70;
    border-radius: 4px;
}

.seek-bar::-moz-range-progress {
    height: 4px;
    background: var(--lcd-main);
    border-radius: 4px;
}

.seek-bar::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: var(--lcd-bright);
    border: 1px solid var(--lcd-soft);
    border-radius: 50%;
}

.audio-engine {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#audio-controls {
    width: 100%;
    display: grid;
    gap: 7px;
    margin-top: 6px;
    padding: 5px;
    background: #030303;
    border: 1px solid #171717;
    border-radius: 7px;
}

.control-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
}

.control-row button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-grid;
    place-items: center;
    padding: 7px;
    color: #fff;
    background:
        linear-gradient(180deg, #181818, #080808);
    border: 1px solid #343434;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 2px 5px rgba(0,0,0,.45);
    cursor: pointer;
    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.control-row button img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.control-row button span {
    font-size: 22px;
    line-height: 1;
}

.control-row button:hover {
    transform: translateY(-1px) scale(1.05);
    background: linear-gradient(180deg, #252525, #101010);
    border-color: #60777a;
    box-shadow: 0 0 9px rgba(172,231,238,.14);
}

.control-row button:active {
    transform: translateY(1px) scale(.97);
}

.control-row button:focus-visible {
    outline: 2px solid var(--dmc-cyan);
    outline-offset: 2px;
}

.control-row-primary {
    padding-bottom: 1px;
}

.control-row-secondary {
    padding-top: 1px;
}

.player-status-line {
    min-height: 16px;
    margin-top: 3px;
    color: #6f8f93;
    font-family: Consolas, monospace;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
}

/* Visualiseur
   ========================================================================== */

.visualizer-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px 2px 8px 20px;
    background: #000;
    border-top: 1px solid #151515;
    border-bottom: 1px solid #151515;
}

.visualizer-container::before {
    content: "L\A R";
    white-space: pre;
    position: absolute;
    left: 2px;
    top: 7px;
    color: #78999d;
    font-family: Consolas, monospace;
    font-size: 8px;
    line-height: 11px;
}

.bar-container {
    width: 100%;
    height: 5px;
    display: flex;
    background: #000;
    overflow: hidden;
}

.audio-segment {
    flex: 1 1 auto;
    height: 100%;
    min-width: 1px;
    margin-right: 1px;
    background: #222;
    opacity: 0.4;
    transition: background-color 0.08s linear, opacity 0.08s linear;
}

.audio-segment:last-child {
    margin-right: 0; 
}

/* Égaliseur
   ========================================================================== */


#eq-controls {
    width: 100%;
    min-height: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 2px 0 0;
    padding: 4px 0 0;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: -15px;
}

/* Sur mobile, le son reste confié au moteur natif pour éviter les coupures. */
.native-mobile-audio #eq-controls {
    opacity: .42;
    pointer-events: none;
    filter: saturate(.45);
}
.eq-band {
    width: 36px;
    height: 102px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; padding-top: 10px;
}

.eq-band input[type="range"] {
    width: 72px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    transform: rotate(-90deg);
}

.eq-band input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #222;
    border-radius: 3px;
}

.eq-band input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -3px;
    appearance: none;
    -webkit-appearance: none;
    background: #666;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.eq-band input[type="range"]::-moz-range-track {
    height: 6px;
    background: #222;
    border-radius: 3px;
}

.eq-band input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--dmc-cyan);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.eq-band-label {
    margin-top: 36px;
    color: #fffbfb;
    font-size: 10px;
}


/* Liste des pistes
   ========================================================================== */

.tracklist-card {
    height: 210px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow: hidden;
}

.tracklist-card ul {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--dmc-cyan) #0a0a0a;
}

.tracklist-card ul::-webkit-scrollbar {
    width: 4px;
}

.tracklist-card ul::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 4px;
}

.tracklist-card ul::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--dmc-cyan), var(--dmc-red));
    border-radius: 4px;
}

.tracklist-card li {
    display: grid;
    gap: 2px;
    padding: 7px 5px;
    color: var(--dmc-cyan);
    border-bottom: 1px solid #222;
    font-size: 12px;
    cursor: pointer;
}

.tracklist-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tracklist-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #777;
    font-size: 9px;
}

.tracklist-meta {
    color: #777;
}

.tracklist-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.tracklist-links:not(:empty)::before {
    content: "-";
    color: #555;
}

.tracklist-links a {
    color: #a9dce2;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.tracklist-links a + a::before {
    content: "-";
    margin-right: 4px;
    color: #555;
}

.tracklist-links a:hover,
.tracklist-links a:focus-visible {
    color: var(--dmc-green);
    text-decoration: underline;
    outline: none;
}

.tracklist-card li:hover,
.tracklist-card li:focus-visible {
    color: var(--dmc-red);
    outline: none;
}

.tracklist-card li.active {
    color: var(--dmc-green);
    font-weight: 700;
}

/* Tiroirs
   ========================================================================== */

.slide-section {
    max-height: 700px;
    opacity: 1;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        margin 0.4s ease,
        padding 0.4s ease,
        border-width 0.4s ease;
}

.slide-section.slide-closed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Responsive
   ========================================================================== */

@media (max-width: 560px) {
    body {
        padding: 6px;
        background-attachment: scroll;
    }

    .ariane {
        align-items: flex-start;
        flex-direction: column;
    }

    .ariane-right ul {
        justify-content: flex-start;
    }

    .album-card {
        flex-direction: column;
    }

    .album-card .album-thumb,
    .album-card .album-info {
        width: 100%;
    }

    .album-card .album-thumb img {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    #eq-controls {
        gap: 0;
    }

    .eq-band {
        width: 30px;
    }

    .eq-band input[type="range"] {
        width: 64px;
    }
}


/* Description séparée sur mobile
   ========================================================================== */

#descript-album-mobile {
    display: none;
}

@media (max-width: 560px) {
    .album-card .album-info {
        display: none;
    }

    #descript-album-mobile {
        display: block;
        width: min(100%, 430px);
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 15px;
        overflow: visible;
    }

    #descript-album-mobile .album-description-mobile {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        color: #ddd;
        font-size: 14px;
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


@media (max-width: 440px) {
    .control-row {
        gap: 5px;
    }

    .control-row button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        padding: 6px;
    }

    .control-row button img {
        width: 25px;
        height: 25px;
    }

    .control-row button span {
        font-size: 20px;
    }

    .tracklist-meta-row {
        line-height: 1.45;
    }
}



.tracklist-card li {
    display: grid;
    gap: 3px;
    padding: 8px 5px;
    color: var(--dmc-cyan);
    border-bottom: 1px solid #222;
    cursor: pointer;
}

.tracklist-title {
    display: block;
    overflow: hidden;

    color: var(--dmc-cyan);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.tracklist-meta {
    display: block;

    color: #888888;

    font-size: 10px;
    line-height: 1.45;
}

.tracklist-information {
    color: #888888;
}

.tracklist-links {
    display: inline;
}

.tracklist-link {
    color: #ace7ee;
    font-weight: 700;
    text-decoration: none;
}

.tracklist-link:hover,
.tracklist-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.tracklist-download-link {
    color: #17edbd;
}

.tracklist-download-link:hover,
.tracklist-download-link:focus-visible {
    color: #baffea;
}

.tracklist-card li.active .tracklist-title {
    color: var(--dmc-green);
}

.tracklist-card li:hover .tracklist-title {
    color: #ffffff;
}

/* ==========================================================================
   Ordre réel des éléments dans MAIN
   ========================================================================== */

main {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
}

/* 1 — Lecteur MP3 */
#playerCard {
    order: 0 !important;
    position: relative !important;
    margin: 0 !important;
}

/* 2 — Fiche album */
#albumCard {
    order: 1 !important;
    position: relative !important;
}

/* 3 — Playlist */
#tracklistCard {
    order: 2 !important;
    position: relative !important;
}

/* 4 — Description mobile */
#descript-album-mobile {
    order: 3 !important;
    position: relative !important;
}

/* 5 — Grand menu inférieur */
.ariane-bas {
    order: 10 !important;
    position: relative !important;
    margin-top: 18px !important;
    
    
    
    .share-btn{
    text-decoration: none;
}

.share-btn:hover{
    text-decoration: none;
}

.share-btn:visited{
    text-decoration: none;
}

.share-btn:focus{
    text-decoration: none;
}
}